import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    SectionList,
} from 'react-native';
import * as Color from "../constant/Color";

const ITEM_HEIGHT = 50;

/**
 * (注：Android-分组不吸顶, IOS-分组吸顶)
 * SectionSeparatorComponent：   组之间的分割控件
 * renderSectionHeader：         组的头部
 * sections：                    列表的数据
 */
export default class SectionListDemo extends Component {

    mDatas;
    componentWillMount(){
        this.mDatas = this._getDatas();
    }

    /** 整个列表的头 */
    _header(){
        return <Text style={[styles.txt,{backgroundColor:Color.colorAccent}]}>这是头部</Text>;
    };

    /** 整个列表的尾 */
    _footer(){
        return <Text style={[styles.txt,{backgroundColor:Color.colorAccent}]}>这是尾部</Text>;
    };

    /** 每组 */
    _sectionComponent(info){
        let txt = '组:' + info.section.key;
        return <Text
            style={[styles.txt, {backgroundColor: Color.lightGray, color: Color.white,} ]}>{txt}</Text>
    };

    /** 每组的前后分隔View */
    _sectionSeparatorComponent(){
        return <View style={{height:2,backgroundColor:Color.darkGray}}/>
    }

    /** 每项 */
    _itemComponent(info){
        let txt = 'index:' + info.index + '     ' + info.item.title;
        let bgColor = info.index % 2 === 0 ? Color.white : Color.windowWhite;
        return <Text
            style={[{backgroundColor: bgColor}, styles.txt]}>{txt}</Text>
    };

    /** 每项之间的分隔View */
    _itemSeparatorComponent(){
        return <View style={{height:1,backgroundColor:Color.darkGray}}/>;
    };

    render() {
        return (
            <View style={{flex:1}}>
                <SectionList
                    sections={this.mDatas}
                    keyExtractor={(item,index)=>("index"+index+item)}
                    stickySectionHeadersEnabled={true}

                    ListHeaderComponent={() => this._header()}
                    ListFooterComponent={() => this._footer()}

                    renderSectionHeader={(info) => this._sectionComponent(info)}
                    SectionSeparatorComponent={() => this._sectionSeparatorComponent()}

                    renderItem={(info) => this._itemComponent(info)}
                    ItemSeparatorComponent={() => this._itemSeparatorComponent()}

                    refreshing={false}
                    onRefresh={()=>{alert("刷新")}}

                    onEndReachedThreshold={0.1}
                    onEndReached={(info)=>{alert("到达底部")}}
                />
            </View>
        );
    }

    /**
     * 和 ListView 不同，它没有特殊的 DataSource 数据类型作为传入参数。
     * 它接收的仅仅只是一个 Array<object> 作为参数。
     * 参数数组中的每一项，需要包含 key 值作为唯一标示。数据结构如下：
     * [{title: 'Title Text', key: 'item1'}]
     */
    _getDatas(){
        let sections = [];
        for (let i = 0; i < 10; i++) {
            let datas = [];
            for (let j = 0; j < 10; j++) {
                datas.push({title: 'title:' + j, key: 'title:' + j});
            }
            sections.push({key: i, data: datas});   // 默认section的子列表是在data属性里面
        }
        return sections;
    }
}

const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: Color.darkGray,
        fontSize: 20,
        height: ITEM_HEIGHT,
    }
});
